Wavy Slider/ir.mahozad.multiplatform.wavyslider.material/WavySlider

WavySlider

@Composable
fun WavySlider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onValueChangeFinished: () -> Unit? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, colors: SliderColors = SliderDefaults.colors(), waveLength: Dp = SliderDefaults.WaveLength, waveHeight: Dp = SliderDefaults.WaveHeight, wavePeriod: Duration = SliderDefaults.WavePeriod, waveMovement: WaveMovement = SliderDefaults.WaveMovement, waveThickness: Dp = SliderDefaults.WaveThickness, trackThickness: Dp = SliderDefaults.TrackThickness, shouldFlatten: Boolean = SliderDefaults.ShouldFlatten)

A wavy slider much like the Material Design 2 slider.

Setting waveHeight or waveLength to 0.dp results in a regular Material Slider.

This component can also be used as a progress bar.

Note that range sliders do not make sense for the wavy slider. So, there is no RangeWavySlider counterpart.

Parameters

value

current value of the WavySlider

onValueChange

lambda in which value should be updated

modifier

modifiers for the WavySlider layout

enabled

whether or not component is enabled and can be interacted with or not

onValueChangeFinished

lambda to be invoked when value change has ended. This callback shouldn't be used to update the wavy slider value (use onValueChange for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.

interactionSource

the MutableInteractionSource representing the stream of Interactions for this WavySlider. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this WavySlider in different Interactions.

colors

SliderColors that will be used to determine the color of the WavySlider parts in different state. See SliderDefaults.colors to customize.

waveLength

the distance over which the wave's shape repeats.

waveHeight

the total height of the wave (from crest to trough i.e. amplitude * 2). The final rendered height of the wave will be waveHeight + waveThickness.

wavePeriod

the duration it takes for the wave to move by waveLength horizontally. Setting to Duration.ZERO or outside Int.MIN_VALUE..Int.MAX_VALUE milliseconds stops the movement.

waveMovement

the horizontal movement of the whole wave. To stop the movement, see wavePeriod.

waveThickness

the thickness of the active line (whether animated or not).

trackThickness

the thickness of the inactive line.

shouldFlatten

whether to decrease the wave height the farther it is from the thumb.